<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/reg.css">
    <style>


    </style>
</head>

<body>
    <div class="root">
        <div class="register-phone">
            <div class="mi-layout">
                <div class="mi-layout-sider">
                    <img src="https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.5b1efcd8.jpg"
                        alt="">
                </div>
                <div class="mi-layout-container">
                    <div class="mi-layout-header">
                        <div class="mi-layout-logo">
                            <h1></h1><img src="../images/Xiaomi_logo.png" alt=""></h1>
                            <h2>小米帐号</h2>
                        </div>
                        <ul class="mi-layout-nav">
                            <li><a href="">用户协议</a></li>
                            <li><a href="">隐私政策</a></li>
                            <li><a href="">帮助中心</a></li>
                            <li><a href="">中文(简体)</a></li>
                        </ul>
                    </div>
                    <div class="mi-layout-mid mi-layout-mid-reg mi-layout-mid-on">
                        <div class="mi-layout-cord">
                            <div class="ant-tabs-nav">
                                <h3><a href="../html/Xiaomi_login.html">登录</a></h3>
                                <h3><a class="ant-tabs-nav-on" href="">注册</a></h3>
                            </div>
                            <div class="mi-from-phone">
                                <div class="mi-from-phone-left">
                                    <select>
                                        <option value="+86">+86</option>
                                    </select>
                                </div>
                                <div class="mi-from-phone-ringht">
                                    <input type="text" placeholder="手机号" class="mi-from-phone-ringht-inp">
                                    <span></span>
                                </div>
                            </div>

                            <div class="mi-from-pwd">
                                <input type="password" placeholder="密码" class="mi-from-pwd-inp">
                                <span></span>
                            </div>

                            <div class="mi-from-code">
                                <div class="mi-from-code-text">
                                    <input type="text" placeholder="请输入验证码" class="mi-from-code-inp">
                                    <span></span>
                                </div>
                                <div class="mi-from-code-code"></div>
                                <div class="mi-from-code-btn">
                                    <button>获取验证码</button>
                                </div>
                            </div>
                            <div class="mi-accept-terms">
                                <input type="checkbox" class="mi-accept-terms-consent">
                                <p>已阅读并同意小米帐号 <strong>用户协议</strong> 和 <strong>隐私政策</strong></p>
                            </div>
                            <div class="mi-button">
                                <button class="reg-btn" disabled>注册</button>
                            </div>
                            <div class="mi-from-actions">
                                <a href="">收不到验证码？</a>
                            </div>
                            <div class="mi-sns-login">
                                <div class="mi-sns-login-title">其他登录方式</div>
                                <ul class="mi-sns-login-content">
                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1157784725,3852603273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img0.baidu.com/it/u=1210664285,305400953&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=2119010768,2596446330&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=451"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1078970566,1032880499&fm=253&fmt=auto&app=138&f=PNG?w=233&h=234"
                                                alt="">
                                        </a></li>

                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="mi-layout-mid mi-layout-mid-login ">
                        <div class="mi-layout-cord">
                            <div class="ant-tabs-nav">
                                <h3><a class="ant-tabs-nav-on href=">登录</a></h3>
                                <h3><a href="">注册</a></h3>
                            </div>
                            <div class="mi-from-user">
                                <input type="text" placeholder="邮箱/手机号码/小米ID">

                            </div>
                            <div class="mi-from-pwd">
                                <input type="password" placeholder="密码">
                            </div>
                            <div class="mi-from-code">
                                <div class="mi-from-code-text">
                                    <input type="text" placeholder="请输入验证码">
                                </div>
                                <div class="mi-from-code-code">1234</div>
                                <div class="mi-from-code-btn">
                                    <button>获取验证码</button>
                                </div>
                            </div>
                            <div class="mi-accept-terms">
                                <input type="checkbox">
                                <p>已阅读并同意小米帐号 <strong>用户协议</strong> 和 <strong>隐私政策</strong></p>
                            </div>
                            <div class="mi-button">
                                <button class="reg-btn">登录</button>
                            </div>
                            <div class="mi-from-actions">
                                <p><a href="">忘记密码？</a></p>
                                <p><a href="">手机号登录</a></p>
                            </div>
                            <div class="mi-sns-login">
                                <div class="mi-sns-login-title">其他登录方式</div>
                                <ul class="mi-sns-login-content">
                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1157784725,3852603273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img0.baidu.com/it/u=1210664285,305400953&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=2119010768,2596446330&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=451"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1078970566,1032880499&fm=253&fmt=auto&app=138&f=PNG?w=233&h=234"
                                                alt="">
                                        </a></li>

                                </ul>
                            </div>
                        </div>
                    </div> -->


                    <div class="mi-layout-copy">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>

                </div>
            </div>

        </div>
    </div>




    <script src="../js/jq.js"></script>
    <script src="../js/code.js"></script>
    <script src="../js/promise_ajax.js"></script>
    <script>

        // 注册验证
        //用手机号做唯一用户名

        //手机号输入框
        const oPhone = document.querySelector('.mi-from-phone-ringht-inp');
        const oPhoneSpan = document.querySelector('.mi-from-phone-ringht span');
        //密码输入框
        const oPwd = document.querySelector('.mi-from-pwd-inp');
        const oPwdSpan = document.querySelector('.mi-from-pwd span');
        // 验证码输入框
        const oCode = document.querySelector('.mi-from-code-inp');
        const oCodeSpan = document.querySelector('.mi-from-code span');
        //验证码显示框
        const oCode_text = document.querySelector('.mi-from-code-code');
        //验证码获取按钮
        const oCode_btn = document.querySelector('.mi-from-code-btn button');
        //勾选
        const oConsent = document.querySelector('.mi-accept-terms-consent');
        //注册按钮
        const oRegbtn = document.querySelector('.reg-btn');
        // console.log(oPhone,oPwd,oCode,oCode_text,oCode_btn,oConsent,oRegbtn);
        console.log(oCode, oCode_text);

        let flag1 = false;//手机号
        let flag2 = false;//密码
        let flag3 = false;//验证码
        let flag4 = false;//勾选


        oCode_text.innerHTML = code();

        oPhone.onblur = function () {
            if (!/^1\d{10}$/.test(this.value)) {
                oPhoneSpan.innerHTML = '手机号码格式不正确';
                oPhoneSpan.style.color = 'red';
                flag1 = false;
                oRegbtn.disabled = true;
                return;
            }
            oPhoneSpan.innerHTML = '';
            // oPhoneSpan.style.color = 'green';
            flag1 = true;
            console.log(1);

        }

        oPwd.onblur = function () {

            //密码不能包含特殊字符
            if (!/[0-9a-zA-Z]/.test(this.value)) {
                oPwdSpan.innerHTML = '密码不能包含特殊字符'
                oPwdSpan.style.color = 'red'
                flag2 = false;
                oRegbtn.disabled = true;
                return;
            }

            //长度6-12之间
            if (!/^.{6,12}$/.test(this.value)) {
                oPwdSpan.innerHTML = '长度须为6-12位';
                oPwdSpan.style.color = 'red';
                flag2 = false;
                oRegbtn.disabled = true;
                return;
            }

            //密码强
            if (/\d/.test(this.value) && /[a-z]/.test(this.value) && /[A-Z]/.test(this.value)) {
                // console.log(1)
                oPwdSpan.innerHTML = '密码强';
                oPwdSpan.style.color = 'green';
                flag2 = true;
                oRegbtn.disabled = true;
                return;
            }
            //密码中
            if (/\d/.test(this.value) && /[a-z]/.test(this.value) || /[A-Z]/.test(this.value) && /[a-z]/.test(this.value) || /\d/.test(this.value) && /[A-Z]/.test(this.value)) {
                // console.log(2)
                oPwdSpan.innerHTML = '密码中';
                oPwdSpan.style.color = 'yellow';
                flag2 = true;
                oRegbtn.disabled = true;
                return;
            }
            //密码弱
            if (/\d/.test(this.value) || /[a-z]/.test(this.value) || /[A-Z]/.test(this.value)) {
                console.log(3)
                oPwdSpan.innerHTML = '密码弱';
                oPwdSpan.style.color = 'red';
                flag2 = true;
                oRegbtn.disabled = true;
                console.log(2);
                return;
            }
        }



        //获取验证码
        oCode_btn.onclick = function () {
            oCode_btn.disabled = true;
            oCode_btn.innerHTML = `10S`;
            let s = 10;
            let t_one = setInterval(() => {
                s--;
                if (s == 0) {
                    clearInterval(t_one);
                    oCode_btn.disabled = false;
                    oCode_btn.innerHTML = '获取验证码';
                }
                else {
                    oCode_btn.disabled = true;
                    oCode_btn.innerHTML = `${s}S`;
                }
            }, 1000)


            flag3 = false;
            oCode_text.innerHTML = code();
            oCode.value = '';
            // oRegbtn.disabled = true;
            // oRegbtn.style.backgroundColor = '#ffbe99';

        }

        //判断验证码
        oCode.onblur = function () {
            if (oCode.value.toLowerCase() === oCode_text.innerHTML.toLowerCase()) {
                flag3 = true;
            }
            else {
                flag3 = false;
            }
        }

        // oConsent.onclick = function () {

        //     if (oConsent.checked) {
        //         flag4 = true;
        //         // console.log(666);
        //         if (flag1 && flag2 && flag3 && flag4) {
        //             oRegbtn.disabled = false;
        //             oRegbtn.style.backgroundColor = '#ff6a00';
        //             oRegbtn.onclick = async function () {
        //                 const userphone = oPhone.value;
        //                 const userpwd = oPwd.value;
        //                 if (userphone && userpwd) {
        //                     const res = await reg({
        //                         userphone,
        //                         userpwd
        //                     })
        //                     console.log(res);
        //                     const { status, msg } = res;
        //                     if (status) {
        //                         console.log(msg);
        //                         location.href = './Xiaomi_login.html';
        //                     }
        //                     else {
        //                         console.log(msg);
        //                     }
        //                 }
        //             }
        //         }
        //         else {
        //             oRegbtn.disabled = true;
        //             oRegbtn.style.backgroundColor = '#ffbe99';
        //         }
        //     }
        //     else {
        //         flag4 = false;
        //         oRegbtn.disabled = true;
        //         oRegbtn.style.backgroundColor = '#ffbe99';

        //     }
        // }


        oConsent.onclick = function () {

            if (oConsent.checked) {
                flag4 = true;
                // console.log(666);
                if (flag1 && flag2 && flag3 && flag4) {
                    oRegbtn.disabled = false;
                    oRegbtn.style.backgroundColor = '#ff6a00';

                }
                else {
                    oRegbtn.disabled = true;
                    oRegbtn.style.backgroundColor = '#ffbe99';
                }
            }
            else {
                flag4 = false;
                oRegbtn.disabled = true;
                oRegbtn.style.backgroundColor = '#ffbe99';

            }
        }

        oRegbtn.onclick = async function () {
            if (oCode.value.toLowerCase() === oCode_text.innerHTML.toLowerCase()) {
                const userphone = oPhone.value;
                const userpwd = oPwd.value;
                if (userphone && userpwd) {
                    const res = await reg({
                        userphone,
                        userpwd
                    })
                    console.log(res);
                    const { status, msg } = res;
                    if (status) {
                        console.log(msg);
                        location.href = './Xiaomi_login.html';
                    }
                    else {
                        console.log(msg);
                    }
                }
            }

        }






    </script>



</body>

</html>